<template>
  <router-view v-slot="{ Component }">
    <transition name="fade">
      <component :is="Component" v-if="state" />
    </transition>
  </router-view>
</template>

<script setup lang="ts">
import settingStore from '@/store/modules/settings/index'
import user from '@/store/modules/user/index'
import { nextTick } from 'vue'
import { watch, ref } from 'vue'
let refreshSetting = settingStore()
let state = ref(true)

watch(
  () => refreshSetting.refresh,
  () => {
    state.value = false
    nextTick(() => {
      state.value = true
    })
  }
)
</script>

<style scoped lang="scss">
.fade-enter-from {
  opacity: 0;
}
.fade-enter-active {
  transition: all 1s;
  background: red; // 添加背景颜色用于测试
}

.fade-enter-to {
  opacity: 1;
}
</style>